<template>
    <div class="chart-main">
        <el-row>
            <el-col >
                <div id="userChart"></div>
            </el-col>
            <el-col>
                <div id="userDoChart"></div>
            </el-col>
        </el-row>
    </div>
</template>
<script >
    // 引入图表插件
    import charts from 'echarts'
    export default {
        data(){
        return {
            }
        },
        methods:{
            // 用户来源图
            getUserChart(){
                var myUserChart=charts.init(document.getElementById('userChart'))
                myUserChart.showLoading()
                var options={
                    title:{
                        text:'用户来源'
                    },
                    // 气泡提示框
                    tooltip:{
                        // 触发类型,若要显示数据是item
                        trigger:'axis',
                        // 坐标轴指示器
                        axisPointer:{
                            type:'cross',
                            // 十字准星指示器
                            label:{
                                backgroundColor:'#ccc'
                            }
                        }
                    },
                    // 图例配置
                    legend:{
                data: ['华东', '华北', '华南', '西部', '其他']

                    },
                    // 工具箱
                    toolbox:{
                        // 启用功能
                        feature:{
                            // 保存图片
                            saveAsImage:{}
                        }
                    },
                    // 直角坐标系内绘网格
                    gird:{
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    // 横轴数组
                    xAxis:[
                    {
                        type:'category',
                        // 坐标系两端空白策略
                        boundaryGap:false,
                        data:['周一', '周二', '周三', '周四', '周五', '周六', '周日']
                    }],
                    // 纵轴默认value
                    yAxis:[
                    {type:'value'}
                    ],
                    // 驱动图生成的数据类容
                    series:[
                        {
                            name:'华东',      //图例名称
                            stack:'总量',
                            areaStyle:{normal:{}},
                            type:'line',        //图表类型 折线图
                            data:[120, 132, 101, 134, 90, 230, 210]
                        },
                        {
                          name: '华北',
                          type: 'line',
                          stack: '总量',
                          areaStyle: {normal: {}},
                          data: [220, 182, 191, 234, 290, 330, 310]
                        },
                        {
                          name: '华南',
                          type: 'line',
                          stack: '总量',
                          areaStyle: {normal: {}},
                          data: [150, 232, 201, 154, 190, 330, 410]
                        },
                        {
                          name: '西部',
                          type: 'line',
                          stack: '总量',
                          areaStyle: {normal: {}},
                          data: [320, 332, 301, 334, 390, 330, 320]
                        },
                        {
                          name: '其他',
                          type: 'line',
                          stack: '总量',
                          label: {
                            normal: {
                              show: true,
                              position: 'top'
                            }
                          },
                          areaStyle: {normal: {}},
                          data: [820, 932, 901, 934, 1290, 1330, 1320]
                        }]
                }
                // 使用选项
                myUserChart.setOption(options)
                myUserChart.hideLoading()
            }
        },
        mounted(){
            this.getUserChart()
        }
    }

</script>
<style lang="" scpoed>
        #userChart{
            height: 600px;
        }
</style>